<template>
  <div class="box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="出港" name="first">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="cgform"
                :rules="rules"
                :model="cgform"
                label-width="120px"
                class="flex-start"
              >
                <el-form-item label="时间范围" style="width: 450px" prop="sj">
                  <el-date-picker
                    v-model="cgform.sj"
                    value-format="yyyy-MM-dd"
                    class="input1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="getcgtime"
                  />
                </el-form-item>
                <el-form-item label="网点名称">
                  <el-select
                    v-model="cgform.networkNameId"
                    placeholder="请选择网点名称"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in jsnetdata"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.networkName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="省份" prop="province">
                  <el-select
                    v-model="cgform.province"
                    placeholder="请选择省份"
                    style="width: 142px"
                  >
                    <el-option
                      v-for="item in provinces"
                      :key="item.pid"
                      :label="item.province"
                      :value="item.pid"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="网点查询范围">
                  <el-select
                    v-model="cgform.searchScope"
                    placeholder="请选择网点查询范围"
                    style="width: 180px"
                  >
                    <el-option
                      v-for="item in wdcxfw"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button class="btn" @click="cgSubmit">查询</el-button>
                  <elbutton :obj="cgform" @dj="cgreset" />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="24" class="flex-end">
            <div>
              <el-button class="dc" icon="el-icon-upload2">导出</el-button>
              <el-button class="dc">数据说明</el-button>
            </div>
          </el-col>
        </el-row>
        <elltable :n="3" :loading="loading" :data="cgtableData" :th="cgth" />

        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="cgform.pageDate.pageNum"
            :page-size="cgform.pageDate.pageSize"
            :total="cgtotal"
            @size-change="cghandleSizeChange"
            @current-change="cghandleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="承包区" name="second">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="cbform"
                :model="cbform"
                label-width="120px"
                class="flex-start"
                :rules="rules"
              >
                <el-form-item prop="sj" label="时间范围" style="width: 450px">
                  <el-date-picker
                    v-model="cbform.sj"
                    value-format="yyyy-MM-dd"
                    class="input1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="getcbqtime"
                  />
                </el-form-item>
                <el-form-item label="网点名称">
                  <el-select
                    v-model="cbform.networkNameId"
                    placeholder="请选择网点名称"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in jsnetdata"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.networkName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="承包区名称">
                  <el-input
                    v-model="cbform.settleObjectNameId"
                    placeholder="请输入内容"
                  />
                </el-form-item>
                <el-form-item label="省份" prop="province">
                  <el-select
                    v-model="cbform.province"
                    placeholder="请选择省份"
                    style="width: 170px"
                  >
                    <el-option
                      v-for="item in provinces"
                      :key="item.pid"
                      :label="item.province"
                      :value="item.pid"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button class="btn" @click="cbqSubmit">查询</el-button>
                  <elbutton :obj="cbform" @dj="cbclear" />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="24" class="flex-end">
            <div>
              <el-button class="dc" icon="el-icon-upload2">导出</el-button>
              <el-button class="dc">数据说明</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                :n="3"
                :loading="loading"
                :data="cbqtableData"
                :th="cbth"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="cbform.pageDate.pageNum"
            :page-size="cbform.pageDate.pageSize"
            :total="cbqtotal"
            @size-change="cbhandleSizeChange"
            @current-change="cbhandleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="客户" name="third">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="khform"
                :model="khform"
                :rules="rules"
                label-width="120px"
                class="flex-start"
              >
                <div class="fs">
                  <el-form-item label="客户名称">
                    <el-input
                      v-model="khform.clientId"
                      placeholder="请输入内容"
                    />
                  </el-form-item>
                  <el-form-item label="时间范围" style="width: 450px" prop="sj">
                    <el-date-picker
                      v-model="khform.sj"
                      value-format="yyyy-MM-dd"
                      class="input1"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="getkhtime"
                    />
                  </el-form-item>
                  <el-form-item label="网点名称">
                    <el-select
                      v-model="khform.networkNameId"
                      placeholder="请选择网点名称"
                      style="width: 286px"
                    >
                      <el-option
                        v-for="item in jsnetdata"
                        :key="item.id"
                        :label="item.networkName"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="省份" prop="province">
                    <el-select
                      v-model="khform.province"
                      placeholder="请选择省份"
                      style="width: 142px"
                    >
                      <el-option
                        v-for="item in provinces"
                        :key="item.pid"
                        :label="item.province"
                        :value="item.pid"
                      />
                    </el-select>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item>
                    <el-button class="btn" @click="khSubmit">查询</el-button>
                    <elbutton :obj="khform" @dj="khclear" />
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="24" class="flex-end">
            <div>
              <el-button icon="el-icon-upload2" class="dc">导出</el-button>
              <el-button class="dc">数据说明</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                :n="3"
                :loading="loading"
                :data="khtableData"
                :th="khth"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="khform.pageDate.pageNum"
            :page-size="khform.pageDate.pageSize"
            :total="khtotal"
            @size-change="khhandleSizeChange"
            @current-change="khhandleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getOutletsList } from '@/api/dashboard'
import { cgcxApi, cbqcxApi, khcxApi, getProvince } from '@/api/region'

export default {
  data() {
    return {
      rules: {
        sj: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ]
      },
      // 获取结算网点名称
      jsnetdata: [],
      activeName: 'first',
      provinces: [], // 省市列表
      // 网点查询范围
      wdcxfw: [{
        value: 1,
        label: '本网点'
      },
      {
        value: 2,
        label: '本网点+所有下级网点'
      },
      {
        value: 3,
        label: '所有下级网点'
      }
      ],
      // 出港
      // 出港时间
      // 出港表格数据
      cgtableData: [],
      // 出港表头
      cgth: [],
      // 出港参数
      cgform: {
        endTime: '',
        networkNameId: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        province: '',
        searchScope: '',
        startTime: ''
      },
      // 出港总条数
      cgtotal: 0,
      // 承包区
      // 承包区时间
      // 承包区表格数据
      cbqtableData: [],
      // 承包区表头
      cbth: [],
      // 承包区参数
      cbform: {
        endTime: '',
        networkNameId: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        province: '',
        settleObjectNameId: '',
        startTime: ''
      },
      // 承包区总条数
      cbqtotal: 0,

      // 客户
      // 客户时间
      // 客户表格数据
      khtableData: [],
      // 客户表头
      khth: [],
      // 客户参数
      khform: {
        clientId: '',
        endTime: '',
        networkNameId: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        province: '',
        startTime: ''
      },
      // 客户总条数
      khtotal: 0,
      loading: false
    }
  },
  created() {
    this.getjsnetname()
    this.getProvinceList()
  },
  methods: {
    // 获取省市列表
    async getProvinceList() {
      const res = await getProvince()
      this.provinces = res.data
    },
    // 获取结算网点名称
    async getjsnetname() {
      const res = await getOutletsList()
      this.jsnetdata = res.data
    },
    // 表格tabber
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 出港
    // 重置出港表单
    cgreset(aaa) {
      this.cgform = aaa
      this.cgform.province = ''
      this.cgform.searchScope = ''
    },
    // 出港数据
    async getcgdata() {
      this.loading = true
      const res = await cgcxApi(this.cgform)
      this.loading = false
      console.log('出港数据', res)
      if (res.code === 200) {
        this.cgth = res.data.fields
        this.cgtableData = res.data.list.data
        this.cgtotal = res.data.list.total
      } else {
        this.cgtableData = []
        this.cgtotal = 0
      }
    },
    // 出港分页
    cghandleSizeChange(val) {
      this.cgform.pageDate.pageSize = val
      this.cgform.pageDate.pageNum = 1
      this.cgSubmit()
    },
    cghandleCurrentChange(val) {
      this.cgform.pageDate.pageNum = val
      this.cgSubmit()
    },
    // 承包分页
    cbhandleSizeChange(val) {
      this.cbform.pageDate.pageSize = val
      this.cbform.pageDate.pageNum = 1
      this.cbqSubmit()
    },
    cbhandleCurrentChange(val) {
      this.cbform.pageDate.pageNum = val
      this.cbqSubmit()
    },
    // 客户分页
    khhandleSizeChange(val) {
      this.khform.pageDate.pageSize = val
      this.khform.pageDate.pageNum = 1
      this.khSubmit()
    },
    khhandleCurrentChange(val) {
      this.khform.pageDate.pageNum = val
      this.khSubmit()
    },
    // 获取出港开始结束日期
    getcgtime(value) {
      if (value == null) {
        this.cgform.startTime = ''
        this.cgform.endTime = ''
      } else {
        this.cgform.startTime = value[0]
        this.cgform.endTime = value[1]
      }
    },
    // 出港查询时
    cgSubmit() {
      this.$refs.cgform.validate((valid) => {
        if (valid) {
          this.getcgdata()
        } else {
          return false
        }
      })
    },

    // 承包区
    // 承包重置
    cbclear(aaa) {
      this.cbform = aaa
      this.cbform.province = ''
    },

    // 承包区数据
    async getcbqdata() {
      this.loading = true
      const res = await cbqcxApi(this.cbform)
      this.loading = false
      console.log('承包区数据', res)
      if (res.code === 200) {
        this.cbth = res.data.fields
        this.cbqtableData = res.data.list.data
        this.cbqtotal = res.data.list.total
      } else {
        this.cbqtableData = []
        this.cbqtotal = 0
      }
    },
    // 获取出港开始结束日期
    getcbqtime(value) {
      if (value == null) {
        this.cbform.startTime = ''
        this.cbform.endTime = ''
        return
      }
      this.cbform.startTime = value[0]
      this.cbform.endTime = value[1]
    },
    // 承包区查询时
    cbqSubmit() {
      this.$refs.cbform.validate((valid) => {
        if (valid) {
          this.getcbqdata()
        } else {
          return false
        }
      })
    },
    // 客户
    // 客户重置
    khclear(aaa) {
      this.khform = aaa
      this.khform.province = ''
    },
    // 客户数据
    async getkhdata() {
      this.loading = true
      const res = await khcxApi(this.khform)
      this.loading = false
      console.log('客户数据', res)
      if (res.code === 200) {
        this.khth = res.data.fields
        this.khtableData = res.data.list.data
        this.khtotal = res.data.list.total
      } else {
        this.khtableData = []
        this.khtotal = 0
      }
    },

    // 获取客户开始结束日期
    getkhtime(value) {
      if (value == null) {
        this.khform.startTime = ''
        this.khform.endTime = ''
        return
      }
      this.khform.startTime = value[0]
      this.khform.endTime = value[1]
    },
    // 客户查询时
    khSubmit() {
      this.$refs.khform.validate((valid) => {
        if (valid) {
          this.getkhdata()
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style
  lang="scss"
  scoped
>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  .fs {
    display: flex;

    div {
      margin-right: 20px;
    }
  }
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.btn {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.dc {
  width: 96px;
  height: 36px;
  border-radius: 18px;
  border: 1px solid #b4b4b4;
  color: #666666;
}
.el-button {
  padding: 0;
}
</style>
